<template>
	<div class="default-main">
		<el-row :gutter="20">
			<el-col :span="6" :xs="24">
				<user-card show-auth/>
			</el-col>
			<el-col :span="18" :xs="24">
				<el-card>
					<el-tabs v-model="activeTab">
						<el-tab-pane label="基本信息" lazy name="account">
							<account/>
						</el-tab-pane>
						<el-tab-pane v-if="!isVisitor()" label="修改密码" lazy name="password">
							<password/>
						</el-tab-pane>
						<el-tab-pane v-if="!isVisitor()" label="通知管理" lazy name="notification">
							<notification/>
						</el-tab-pane>
						<el-tab-pane label="操作日志" lazy name="log">
							<timeline v-if="activeTab === 'log'"/>
						</el-tab-pane>
						<el-tab-pane v-if="!isVisitor()" label="账号删除" lazy name="drawDown">
							<draw-down/>
						</el-tab-pane>
						<!--<el-tab-pane label="活动" lazy name="activity">-->
						<!--	<activity/>-->
						<!--</el-tab-pane>-->
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" name="Profile" setup>
import UserCard from './components/UserCard.vue'
import Account from './components/Account.vue'
import Password from '@/views/profile/components/password.vue'
import Notification from '@/views/profile/components/notification.vue'
import DrawDown from '@/views/profile/components/drawDown.vue'
import {useUserStore} from '@/stores/modules/user.store'
import {ref} from 'vue'
import Timeline from '@/views/profile/components/log.vue'
import {isVisitor} from '@/utils/authUtil'

const activeTab = ref('account')

const userStore = useUserStore()

</script>
